import { useState } from 'react'
import './ModelGenerator.css'

function ModelGenerator({ onGenerate, onClose }) {
    const [name, setName] = useState('')
    const [description, setDescription] = useState('')
    const [prompt, setPrompt] = useState('')
    const [imageFile, setImageFile] = useState(null)
    const [mode, setMode] = useState('text') // 'text' or 'image'

    const handleSubmit = (e) => {
        e.preventDefault()

        if (!name.trim()) {
            alert('请输入模型名称')
            return
        }

        const data = { name, description }

        if (mode === 'text') {
            if (!prompt.trim()) {
                alert('请输入文本描述')
                return
            }
            data.prompt = prompt
        } else {
            if (!imageFile) {
                alert('请上传图片')
                return
            }
            // 转换为 base64
            const reader = new FileReader()
            reader.onload = () => {
                data.image_base64 = reader.result.split(',')[1]
                onGenerate(data)
            }
            reader.readAsDataURL(imageFile)
            return
        }

        onGenerate(data)
    }

    return (
        <div className="modal-overlay" onClick={onClose}>
            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
                <h2>✨ 生成 3D 模型</h2>

                <div className="mode-selector">
                    <button
                        className={mode === 'text' ? 'active' : ''}
                        onClick={() => setMode('text')}
                    >
                        📝 文本生成
                    </button>
                    <button
                        className={mode === 'image' ? 'active' : ''}
                        onClick={() => setMode('image')}
                    >
                        🖼️ 图片生成
                    </button>
                </div>

                <form onSubmit={handleSubmit}>
                    <input
                        type="text"
                        placeholder="模型名称"
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                        required
                    />

                    <textarea
                        placeholder="模型描述（可选）"
                        value={description}
                        onChange={(e) => setDescription(e.target.value)}
                        rows="3"
                    />

                    {mode === 'text' ? (
                        <textarea
                            placeholder="描述你想要的 3D 模型，例如：一只可爱的卡通猫"
                            value={prompt}
                            onChange={(e) => setPrompt(e.target.value)}
                            rows="4"
                            required
                        />
                    ) : (
                        <div className="file-upload">
                            <input
                                type="file"
                                accept="image/*"
                                onChange={(e) => setImageFile(e.target.files[0])}
                                required
                            />
                            {imageFile && <p>已选择：{imageFile.name}</p>}
                        </div>
                    )}

                    <div className="modal-actions">
                        <button type="button" onClick={onClose} className="btn-cancel">
                            取消
                        </button>
                        <button type="submit" className="btn-submit">
                            开始生成
                        </button>
                    </div>
                </form>
            </div>
        </div>
    )
}

export default ModelGenerator
